import { memo, useEffect, useState, useRef } from "react";
import { InfiniteScroll, DotLoading } from "antd-mobile";
import styles from "./book.module.scss";
import { goodsList, leaderboard, sift } from "../../../Api";
import { useNavigate } from "react-router-dom";
interface itemList {
  [props: string]: any;
}

let Books: React.FC = () => {
  let [itemList, setItemList] = useState<itemList[]>([]); //达人书单渲染数组
  let [hootItem, setHootItem] = useState<itemList[]>([]); //热门榜单渲染数组
  let [expertSift, setExpertSift] = useState<itemList[]>([]); //达人精选渲染数组
  //达人书单  参数
  let [page, setPage] = useState({ perpage: 10, goods_type: "1", goods_position: "0" });
  //达人精选  参数
  let [sifte, setSifte] = useState({
    perpage: 10,
    goods_type: "1",
    goods_position: "0",
    from: "index",
  });
  // 达人书单
  let data = async () => {
    let { data } = await goodsList(page);
    itemList = data.data.list;
    setItemList([...itemList]);
    // console.log(data);
  };
  // 热门榜单
  let hoot = async () => {
    let { data } = await leaderboard();
    hootItem = data.data.list;
    setHootItem([...hootItem]);
    // console.log(data);
  };
  let [hasMore, setHasMore] = useState(true);
  //达人精选

  let sifts = async () => {
    let { data } = await sift(sifte);
    setExpertSift((val) => [...val, ...data.data.list]);
    setHasMore(data.data.list_ext.goods_type === "1");
    setSifte({ ...sifte, goods_position: String(Number(sifte.goods_position) + 10) });
  };
  let Earth = ({ hasMore }: { hasMore?: boolean }) => {
    return (
      <>
        {hasMore ? (
          <>
            <span>Loading</span>
            <DotLoading />
          </>
        ) : (
          <span>--- 我是有底线的 ---</span>
        )}
      </>
    );
  };
  let to = useNavigate();
  useEffect(() => {
    data();
    hoot();
    // sifts();
  }, []);
  return (
    <>
      <div className={styles.box}>
        <h1>
          <div>
            达人书单 <span>200位阅读推广人联手推荐</span>
          </div>
          <button onClick={() => to("/booklist")}>37个书单 &gt;</button>
        </h1>
        <ul className={styles.list}>
          {itemList.map((item) => (
            <li key={item.goods_id} onClick={() => to("/bookpagedetails/" + item.goods_id)}>
              <img src={item.goods_thumb} alt="" />
              <h3>{item.goods_name}</h3>
              <p>{item.expert_description}</p>
              <div className={styles.user}>
                <img src={item.expert.avatar} alt="" />
                <span>{item.expert.name}</span>
              </div>
            </li>
          ))}
        </ul>
      </div>
      <div className={styles.box1}>
        <h1>
          热门榜单
          <button>榜单详情 &gt;</button>
        </h1>
        <ul>
          {hootItem.map((item) => (
            <li key={item.attr_val_id}>
              <p>{item.title}</p>
              <img src={item.gallery[0].image} alt="" />
              <img src={item.gallery[1].image} alt="" />
              <img src={item.gallery[2].image} alt="" />
            </li>
          ))}
        </ul>
      </div>
      <div className={styles.sift}>
        <h1>
          达人精选<span>8年绘本馆馆长精选绘本</span>
        </h1>
        <ul>
          {expertSift.map((item) => (
            <li key={item.goods_id} onClick={() => to("/bookdetails/" + item.goods_id)}>
              <img src={item.goods_thumb} alt="" />
              <div className={styles.text}>
                <h2>{item.goods_name}</h2>
                <p>{item.expert_info.expert_introduction}</p>
                <div className={styles.user}>
                  <img src={item.expert_info.avatar} alt="" />
                  <span>{item.expert_info.name}</span>
                </div>
              </div>
            </li>
          ))}
          <InfiniteScroll loadMore={sifts} hasMore={hasMore} />
        </ul>
      </div>

      {/* <Earth hasMore={hasMore} /> */}
    </>
  );
};
export default memo(Books);
